<template>
	<view>
		<view class="uni-comment">
			<view class="uni-comment-list">
				<view class="uni-comment-face"><image :src="userInfo.userImg || '/static/images/portrait.png'" mode="widthFix" class="portrait"></image></view>
				<view class="uni-comment-body">
					<view class="uni-comment-textarea">
						<textarea v-model="text" placeholder="说二句吧..."/>
						<view class="uni-comment-btn">
							<button @click="submitComment">发布评论</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="uni-comment" v-for="(item, index) in commentList"  :key="index">
			<view class="uni-comment-list">
				<view class="uni-comment-face"><image :src="item.know_avatar || '/static/images/portrait.png'" mode="widthFix" class="portrait"></image></view>
				<view class="uni-comment-body">
					<view class="uni-comment-top">
						<text>{{item.know_nickname || ''}}</text>
					</view>
					<view class="uni-comment-content">{{item.content || ''}}</view>
					<view class="uni-comment-reply" v-if="item.answer">
						<text class="nickname">管理员({{item.answer_name}})：</text>
						<text>{{item.answer}}</text>
					</view>
					<view class="uni-comment-date">
						<text>{{item.time || ''}}</text>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType" :content-text="contentText"></uni-load-more>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import {mapState} from 'vuex';  
	export default {
		components: {
			uniLoadMore,
		},
		props:['contentId','type'],
		props:{
			contentId:{
				type:[Number,String],
				default: ''
			},
			type:{
				type:[Number,String],
				default: 'course'
			},
			
		},
		data() {
			return {
				commentList:[],
				loadingType: 'more',
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多评论了'
				},
				first: 0,
				count: 10,
				text: '',
				page: 1,
				list_url: 'api/usercomment/commentlist',
				submit_url: 'api/usercomment/add_know_user_comment',
			}
		},
		watch:{
			contentId(val){
				console.log('课程评论22',this.contentId);
				if(val){
					this.loadData();
				}
			}
			
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		created(){
			/* setTimeout(()=>{
				console.log('课程评论',this.contentId);
				this.loadData();
			}, 1000); */
			let t = this;
			if(t.type == 'ask'){
				this.list_url = 'api/article/commentlist';
				this.submit_url = 'api/article/comment'
			}
			uni.$off('onReachBottom');
			uni.$on('onReachBottom',function(){
				console.log('组件监听加载');
				if(this.loadingType === 'nomore'){
					return;
				}
				if(this.loadingType === 'loading'){
					return;
				}
				t.page++;
				t.loadData();
			});
		},
	
		mounted() {
			
		},
		beforeDestroy() {
			uni.$off('onReachBottom');
		},
		destroyed() {
			uni.$off('onReachBottom');
		},
		onLoad(options){
			// console.log('课程评论1111',this.id);
			// #ifdef H5
			this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight+'px';
			// #endif
			this.cateId = options.tid;
			//this.loadCateList(options.fid,options.sid);
			
			this.loadData();
		},
		
		
		methods:{
			/**
			 * 提交评论
			 */
			async submitComment(){
				if(!this.text){
					uni.showToast({
					    icon: 'none',
						position: 'bottom',
					    title: '请输入评论内容',
					});
					return ;
				}
				let params = {};
				
				if(this.type=='ask'){
					params.article_id = this.contentId;
				}else{
					params.id = this.contentId;
				}
				params.content = this.text;
				
				await this.$http.post(this.submit_url,params).then(res=>{
					this.$mHelper.toast(res.msg);
					if(res.code === this.sucCode){
						
						this.loadData('refresh');
						
					}
				}).catch(err=>{
					console.log(err);
				})
				
				/* this.$api.memberGet('/comment/save',{
					contentId: this.contentId,
					text: this.text
				}).then(r=>{
					if(r.data.code == '201'){
						var title = r.data.message;
						if(r.data.message  == 'success'){
								title = '评论成功';
						}
						uni.showToast({
						    icon: 'none',
							position: 'bottom',
						    title: title,
						});
						this.loadData('refresh');
					}
				}); */
			},
			async loadData(type='add', loading = {}) {
				if(type === 'add'){
					if(this.loadingType === 'nomore'){
						uni.hideLoading();
						return;
					}
					this.loadingType = 'loading';
				}else{
					this.loadingType = 'more'
				}
				
				if(type === 'refresh'){
					this.commentList = [];
					this.first = 0;
				}
				let params = {};
				params.page = this.page;
				if(this.type=='ask'){
					params.article_id = this.contentId;
				}else{
					params.id = this.contentId;
				}
				
				await this.$http.post(this.list_url,params).then(res=>{
					if(res.code === this.sucCode){
						
						let list = res.data.list || [];
						
						if(list.length > 0){
							this.first = this.first + list.length;
							this.commentList = this.commentList.concat(list);
						}
						if(list.length < this.count){//没有其他数据了
							this.loadingType = 'nomore';
							uni.stopPullDownRefresh();//没有跟多数据了
						}else{
							this.loadingType = 'more';
						}
						uni.hideLoading();
						
					}else{
						this.$mHelper.toast(res.msg);
					}
				}).catch(err=>{
					console.log(err);
				})
				
				
				/* this.$api.get('/comment/list.php',{contentId: this.contentId, checked: 1, first: 0, count: this.count}).then(r =>{
					let list = r.data.body;
					
					if(list.length != 0){
						this.first = this.first + list.length;
						this.commentList = this.commentList.concat(list);
					}
					if(list.length < this.count){//没有其他数据了
						this.loadingType = 'nomore';
						uni.stopPullDownRefresh();//没有跟多数据了
					}
					uni.hideLoading();
				}); */
				
			}
		}
	}
</script>
<style>
	.portrait{height: 100% !important;}
</style>